<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name="author" content="disenQF" >
        <meta name="keywords" content="CGI开发 H5模板 千锋教育 西安物联网">
        <title>HTML5模板-图片轮播效果</title>
        <!-- 引入外联样式文件 -->
        <link rel="stylesheet" href="/css/my.css">
        <style>
            img{
                width: 100%;
                height: 100%;
                z-index: -1;
                /* position: absolute;  脱离文档流， 结合left/top/right/bottom 确定显示的位置 */
                position: absolute;  
                left: 0;
                top:0;
            }
        </style>
    </head>
    <body>
       <img id="preImg" src="/images/1.webp">
       <p>haha</p>
       <script>
           let images = ["/images/1.webp", "/images/2.webp", "/images/3.webp"];
           let img_idx = 0;
           let id_ = setInterval(function() {
                img_idx ++;
                if(img_idx >= images.length) img_idx = 0;

                // 设置标签的属性
                preImg.setAttribute("src", images[img_idx]);
           }, 3000);
       </script>
    </body>
</html>
